<template>
  <div class="">
    <p style="text-align: center; font-size: 50px; margin-top: 30px;">{{ text }}</p>
    <van-number-keyboard
      :show="show"
      :hide-on-click-outside="false"
      extra-key="."
      @blur="show = false"
      @input="(value: any) => text += value"
      @delete="text = text.substring(0, text.length-1)"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue';

const emit = defineEmits<{
  (e: 'success', type: 'xyq' | 'cyc'): void
}>();

const show = ref(true);

const text = ref('');

const date = new Date();

const month = date.getMonth() + 1;

const day = date.getDate();

const p1 = (month >= 10 ? month.toString() : `0${month}`) + (day >= 10 ? day.toString() : `0${day}` );

const _month = month - 1;

const _day = day + 1;

const p2 = (_month >= 10 ? _month.toString() : `0${_month}`) + (_day >= 10 ? _day.toString() : `0${_day}` );

watch(() => text.value, () => {
  if (text.value === p1) {
    emit('success', 'xyq');
  } else if (text.value === p2) {
    emit('success', 'cyc');
  }
})

onMounted(()=>{

})

defineExpose({
  
})
</script>

<style lang="scss" scoped>
//
</style>
